<template>
  <div class="content">
    <!-- 小挂件 -->
    <div class="x-side" @click="showDrawer">
      <div class="x-title">盒子商城</div>
      <double-right-outlined class="x-right" />
      <double-left-outlined class="x-lefg" />
    </div>
    <!-- 大弹窗 -->
    <a-drawer
      title="盒子商城"
      :placement="placement"
      :closable="true"
      :visible="visible"
      width="width: 100vw"
      headerStyle="
      background: white;
      background: rgba(255, 255, 255, 0.5);
      backdrop-filter: blur(5px);
      border:none;
      color: white;"
      bodyStyle="
      background: white;
      background: rgba(255, 255, 255, 0.2);
      backdrop-filter: blur(5px);
      color: white;"
      @close="onClose"
      class="x-drawer"
    >
      <!-- 应用列表 -->
      <a-row type="flex" align="top">
        <a-col :span="4" class="x-nav">
          <SideNavCom @onSelecte="NavSelecte"></SideNavCom>
        </a-col>
        <a-col :span="20" class="x-li">
          <SideAppList @editMyApp="onCollection" ref="sideApp"></SideAppList>
        </a-col>
      </a-row>
    </a-drawer>
  </div>
</template>

<script lang="ts">
import { defineComponent, computed, ref } from "vue";
import { DoubleRightOutlined, DoubleLeftOutlined } from "@ant-design/icons-vue";
import type { DrawerProps } from "ant-design-vue";
import SideNavCom from "@/components/SideNavCom.vue";
import SideAppList from "@/components/SideAppList.vue";

export default defineComponent({
  name: "SideWindow",
  components: {
    DoubleRightOutlined,
    DoubleLeftOutlined,
    SideNavCom,
    SideAppList,
  },
  props: {},
  setup() {
    const placement = ref<DrawerProps["placement"]>("left");
    const sideApp = ref<any>();

    // const onOk = () => {
    //   return sideApp.value;
    // };
    return { placement, sideApp };
  },
  data() {
    return {
      visible: false,
    };
  },
  created() {
    //
  },
  beforeUnmount() {
    //
  },
  computed: {
    //
  },
  methods: {
    //
    showDrawer() {
      this.visible = true;
    },
    //
    onClose() {
      this.visible = false;
    },
    // 菜单选择
    NavSelecte(id: string) {
      this.sideApp.onSideNav(id);
    },
    // 收藏
    onCollection() {
      this.$emit("editMyApp");
    },
  },
});
</script>

<style scoped lang="less">
.content {
  .x-side {
    cursor: pointer;
    position: fixed;
    left: -75px;
    top: 40%;
    z-index: 10;
    background-color: red;

    height: 40px;
    line-height: 40px;
    color: white;
    padding: 0px 10px;

    background: white;
    background: linear-gradient(
      to right bottom,
      rgba(255, 255, 255, 0.1),
      rgba(255, 255, 255, 0.1)
    );
    backdrop-filter: blur(1em);
    box-shadow: 0 0 1rem rgba(0, 0, 0, 0.2);

    display: flex;
    flex-direction: row;
    align-items: center;

    transition: left 0.5s;

    .x-right {
      display: block;
    }
    .x-lefg {
      display: none;
    }

    .x-title {
      margin-right: 10px;
    }
  }

  .x-side:hover {
    left: 0;

    .x-right {
      display: none;
    }
    .x-lefg {
      display: block;
    }
  }
}

.x-nav {
}

.x-li {
}
</style>
<style lang="less">
.x-drawer {
  .ant-drawer-content {
    background: none;
  }

  .ant-drawer-close {
    color: white;
  }
  .ant-drawer-title {
    color: white;
  }
}
</style>
